<template>
<div class="box-type">
    <div class="title">物品类型</div>
    <div class="chose-list flex align-items flex-start flex-wrap">
        <div class="item" :class="{active:id == item.id}" v-for='(item,idx) in typeList' :key='idx' @click='change(item.id)'>{{ item.name }}</div>
    </div>
</div>
</template>

<script>
import { getPullTypes } from '@/util';
export default {
    props: ['id'],
    model: {
        prop: "id",
        event: "changeTypeIdx",
    },
    data() {
        return {
            typeList: [],
        }
    },
    methods: {
        change(id) {
            this.$emit("changeTypeIdx", id)
            this.$emit('typeChange')
        }
    },
    async created() {
        this.typeList = getPullTypes();
        if (this.id == "") {
            this.$emit("changeTypeIdx", this.typeList[0].id)
        }
    }
}
</script>

<style lang="less" scoped>
.box-type {
    width: 100%;
    padding: 0 14px;
    background-color: #fff;

    .title {
        width: 100%;
        padding: 19px 0;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
    }
}

.chose-list {
    width: 100%;
    height: auto;
    overflow: hidden;

    .item {
        width: auto;
        background: #F3F3F3;
        border-radius: 3px;
        padding: 8px 8.5px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-right: 15px;
        margin-bottom: 13px;
    }

    .active {
        background: #5652FF;
        color: #fff;
    }
}

</style>
